<template>
  <div class="search">
    <!-- 1.顶部导航栏 -->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()" fixed placeholder>
    </van-nav-bar>
    <!-- 2.搜索框 -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="onInput"
    >
      <template #action>
        <div @click="$router.push({path:'/searchResult',query:{keyword}})">搜索</div>
      </template>
    </van-search>

    <!-- 3.推荐词 -->
    <van-cell-group>
      <van-cell v-for="(item,index) in showList" :key="item" icon="search"
      @click="$router.push({path:'/searchResult',query:{keyword:suggestionList[index]}})">
        <template #title>
          <div v-html="item"></div>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 4.搜索历史 -->
    <van-list
       class="search-list"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      >

      <van-cell-group>

      <van-cell title="历史记录"> </van-cell>
        <van-cell v-for="item in historyList" :key="item.art_id" :title="item.title"
        @click="$router.push({ path: '/ArticleDetail', query: { id: item.art_id } })"
        >
        </van-cell>
        </van-cell-group>
      </van-list>

  </div>
</template>

<script>
import { getSuggestion, getSearchHistory } from '@/api/home.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggestionList: [], // 推荐词列表
      timeID: null, // 防抖定时器
      historyList: [], // 历史文章
      page: 1, // 历史页码
      per_page: 10, // 每页数量
      loading: false,
      finished: false
    }
  },
  methods: {
    onInput () {
      /* 输入框防抖处理 */
      // 1.先清除上一次的定时器，以最后一次触发为准
      clearTimeout(this.timeID)
      // 2.开启防抖定时器
      this.timeID = setTimeout(async () => {
        // 检查当前关键字是否为空
        if (this.keyword === '') {
          this.suggestionList = []
          return
        }
        // 调用方法, 发送请求
        const res = await getSuggestion(this.keyword)
        this.suggestionList = res.data.data.options
      }, 500)
    },
    async onLoad () {
      // (1)发送ajax
      const res = await getSearchHistory({
        page: this.page,
        per_page: this.per_page
      })
      console.log(res)
      // (2)绑定数据
      this.historyList.push(...res.data.data.results)
      // (3)页码++
      this.page++
      // (4)关闭动画
      this.loading = false
      // (5)如果全部加载完毕，设置finished为true
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
    }
  },
  computed: {
    showList () {
      // (1)创建正则 ： 全局匹配当前搜索框内容，  g:全局匹配  i:不区分大小写
      const reg = new RegExp(this.keyword, 'gi')
      // (2)map映射数组
      return this.suggestionList.map(item => {
        // 将搜索结果替换为<span>标签
        return item.replace(
          reg,
          match => `<span style="color: red;">${match}</span>`
        )
      })
    }
  }
}
</script>

<style lang="less">

.search{
  height: 100vh;
  overflow-y: scroll;
  .van-search{
    top: 46px;
    position: sticky;
    z-index: 999;
  }
}
</style>
